<app-common-header [title]="pageTitle" [routerUrl]="titleBackUrl">
</app-common-header>

<ion-content>
    <div>
        <form [formGroup]="paymentPwdForm">
            <ion-grid>
                <ion-row>
                    <ion-col size="12">
                        <ion-label>
                            <ion-text color="" class="form_title" [hidden]="PaymentPasswordReset">
                                {{'myAccount.setting.payment_settings.password_setting.password_title' | translate}}
                            </ion-text>
                            <ion-text color="" class="form_title" [hidden]="!PaymentPasswordReset">
                                {{formTitle}}
                            </ion-text>
                        </ion-label>
                    </ion-col>
                </ion-row>
                <ion-row class="input_bottom_color" *ngFor="let item of rows"
                    [ngStyle]="{'display': item.hidden ? 'none' : 'flex'}">
                    <ion-col size="5">
                        <ion-label class="label_top">
                            <ion-text color="" class="input_label">
                                {{item.inputTitle}}
                            </ion-text>
                        </ion-label>
                    </ion-col>
                    <ion-col size="7">
                        <ion-input matInput type="password" maxlength="6" placeholder="{{item.placeholder}}"
                            required="true" name="{{item.inputName}}" formControlName="{{item.inputName}}">
                        </ion-input>
                        <div [ngStyle]="{'display':item.inputName === 'oldPassword' ? 'flex' : 'none'}">
                            <div *ngIf="oldPassword != null && oldPassword.hasError('pattern')" class="form-error-item">
                                The payment password can only be a six digit number
                            </div>
                        </div>
                        <div [ngStyle]="{'display':item.inputName === 'newPassword' ? 'flex' : 'none'}">
                            <div *ngIf="newPassword.hasError('pattern')" class="form-error-item">
                                The payment password can only be a six digit number
                            </div>
                        </div>
                        <div [ngStyle]="{'display':item.inputName === 'confirmPassword' ? 'flex' : 'none'}">
                            <div *ngIf="confirmPassword.hasError('pattern')"
                                class="form-error-item">
                                The payment password can only be a six digit number
                            </div>
                        </div>
                        <div [ngStyle]="{'display':item.inputName === 'oldPassword' ? 'flex' : 'none'}">
                            <!-- <div *ngIf="confirmPassword.invalid && (confirmPassword.dirty || confirmPassword.touched)"> -->
                            <div *ngIf="oldPassword != null && oldPassword.getError('oldPwderror') "
                                class="form-error-item">
                                old Password error
                            </div>
                            <!-- </div> -->
                        </div>
                        <div [ngStyle]="{'display':item.inputName === 'confirmPassword' ? 'flex' : 'none'}">
                            <!-- <div *ngIf="confirmPassword.invalid && (confirmPassword.dirty || confirmPassword.touched)"> -->
                            <div *ngIf="!paymentPwdForm.hasError('match')  && (confirmPassword.dirty || confirmPassword.touched)"
                                class="form-error-item">
                                Confirm that the password is the same as the new password
                            </div>
                            <!-- </div> -->
                        </div>
                        <!-- <div *ngIf="item.inputName.errors.required">
                            {{item.inputName}} is required
                        </div> -->
                        <!-- <div *ngIf="item.inputName.error">
                            {{item.inputName.msg}} 
                        </div>  -->
                    </ion-col>
                </ion-row>
                <ion-row *ngIf="resetBtn">
                    <ion-col size="12">
                        <div class="ion-float-right">
                            <ion-button size="small" fill="clear" [disabled]="false" (click)="toReset()">
                                {{'myAccount.setting.payment_settings.password_setting.reset_password' | translate}}
                            </ion-button>
                        </div>
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col size="12">
                        <ion-button #submitBtn expand="full" [disabled]="!paymentPwdForm.hasError('allMatch')"
                            (click)="toNext()">
                            {{'myAccount.setting.payment_settings.password_setting.confirm_button' | translate}}
                        </ion-button>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </form>
    </div>
</ion-content>